<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>青岛航空运营分析平台</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../assets/js/jquery-3.3.1.min.js"></script>
    <script>
        let [pageH, pageW] = [$(window).height(), $(window).width()];
    </script>
    <style>

    </style>
</head>

<body id="index">
<div id="container">
    <header id="mainHeader">
        <div class="userInfo">
            <i class="iconfont icon-yonghu"></i>
            <span>值班<span class="num">1</span>号：<span class="username">王总</span> </span>
        </div>
        <h1>青岛航空运营分析平台</h1>
        <ul class="info">
            <li class="weatherBox">
                <i class="iconfont">云</i>
                <span class="temperature">20℃~30℃</span>
                <span class="weather">多云</span>
            </li>
            <li class="timeBox">
                <span class="time"></span>
                <span class="date"></span>
            </li>
        </ul>
    </header>
    <main id="main">
        <div class="l myBg">
            <h3>运营指标</h3>
            <div class="l-t">
                <h4>收入</h4>
                <header>
                    <h5>昨日收入</h5><strong>1008</strong><span class="unit">万元</span>
                    <i class="icon-rose"></i>
                </header>
                <ul>
                    <li><i class="icon-money1"></i><h5>月累计收入</h5><strong>15007</strong>
                        <span class="unit">万元</span>
                    </li>
                    <li><i class="icon-money2"></i><h5>座公里收入</h5><strong>0.5</strong>
                        <span class="unit">元</span>
                    </li>
                    <li><i class="icon-money3"></i><h5>小时收入&emsp;</h5><strong>15007</strong>
                        <span class="unit">万元</span>
                    </li>
                </ul>
            </div>
            <div class="l-m">
                <h4>利润</h4>
                <header>
                    <h5>昨日利润</h5><strong>800</strong>万元
                </header>
                <ul>
                    <li>
                        <i class="icon-coins"></i><h5>月累计成本</h5><strong>14219</strong>
                        <span class="unit">万元</span>
                    </li>
                    <li>
                        <i class="icon-coins"></i><h5>月累计成本</h5><strong>0.49</strong>
                        <span class="unit">元</span>
                    </li>
                    <li>
                        <i class="icon-coins"></i><h5>月累计成本</h5><strong>3.67</strong>
                        <span class="unit">万元</span>
                    </li>
                </ul>
            </div>
            <div class="l-b">
                <h4>昨日营运数据</h4>
                <ul>
                    <li class="myBg">
                        <h5>旅客量</h5>
                        <strong>13456</strong><span class="unit">人<small>(VIP:<span id="vip">2</span>人)</small></span>
                    </li>
                    <li class="myBg">
                        <h5>货运量</h5>
                        <strong>53</strong><span class="unit">吨</span>
                    </li>
                </ul>
                <div class="chartBox" id="ec01_circle_passengerLevel"></div>
            </div>
        </div>
        <div class="m">
            <div class="m-t">
                <div class="chartBox" id="ec02_map_airLines"></div>
                <ul>
                    <li><h5>昨日客座率</h5><strong>86</strong><span class="unit">%</span></li>
                    <li><h5>昨日平均票价</h5><strong>660</strong><span class="unit">元</span></li>
                </ul>
            </div>
            <div class="m-b myBg">
                <h4>安全分析</h4>
                <header class="myBg">
                    <i class="icon-eventLight"></i>
                    本周二级（含）以上超限事件<strong>43</strong><span class="unit">起</span>
                </header>
                <ul>
                    <li><i class="icon-clock"></i>
                        <h5>累计安全运行天数：</h5>
                        <strong>1500</strong><span class="unit">天</span>
                    </li>
                    <li><i class="icon-plane"></i>
                        <h5>本周安全运行：</h5>
                        <strong>800</strong><span class="unit">小时</span>&emsp;
                        <strong>500</strong><span class="unit">架次</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="r">
            <div class="r-t myBg">
                <h3>整体运行情况</h3>
                <div class="r-t-t">
                    <h4>今日计划航班</h4>
                    <ul>
                        <li>
                            <h5>今日计划航班总量</h5>
                            <strong>100</strong><span class="unit">架次</span>
                        </li>
                        <li>
                            <h5>已执行</h5>
                            <strong>75</strong>
                        </li>
                        <li>
                            <h5>当前应执行</h5>
                            <strong>80</strong>
                        </li>
                    </ul>
                    <div class="flyTime myBg">
                        <div>飞行时间:<strong>209</strong><span class="unit">小时</span></div>
                        <div>日利用率:<strong>10.5</strong><span class="unit">小时/架日</span></div>
                    </div>
                    <ul>
                        <li>
                            <h5>当前航班正常率</h5>
                            <strong>70%</strong><span class="unit"></span>
                        </li>
                        <li>
                            <h5>备降</h5>
                            <strong>2</strong>
                        </li>
                        <li>
                            <h5>取消</h5>
                            <strong>2</strong>
                        </li>
                        <li>
                            <h5>延误</h5>
                            <strong>20</strong>
                        </li>
                    </ul>
                </div>
                <div class="r-t-b">
                    <h4>本周公司原因不正常航班</h4>
                    <div class="chartBox" id="ec03_line_abnormalFlight"></div>
                </div>
            </div>
            <div class="r-b myBg">
                <h4>昨日油量统计</h4>
                <ul>
                    <li class="myBg">
                        <h5>油量统计</h5>
                        <strong>100</strong><span class="unit">吨</span>
                    </li>
                    <li class="myBg">
                        <h5>小时油量</h5>
                        <strong>2.5</strong><span class="unit">万吨</span>
                    </li>
                </ul>
                <ul>
                    <li class="myBg">
                        <h5>节油</h5>
                        <strong>2.5</strong><span class="unit">吨</span>
                    </li>
                    <li class="myBg">
                        <h5>油价</h5>
                        <strong>3</strong><span class="unit">万吨</span>
                    </li>
                    <li class="myBg">
                        <h5>耗油成本</h5>
                        <strong>3</strong><span class="unit">万</span>
                    </li>
                </ul>
            </div>
        </div>
    </main>
</div>

<script src="http://echarts.baidu.com/examples/data-gl/lines3d-flights.js"></script>
<script src="../assets/js/echarts-4.2.0.js"></script>
<script src="echarts-gl.js"></script>
<!--<script src="http://echarts.baidu.com/examples/data-gl/asset/data/flights.json"></script>-->
<script src="../js/common.js"></script>
<script src="../js/chartsCom.js"></script>
<!--<script src="../js/index.js"></script>-->

<script>
    // import * as echarts from "../assets/js/echarts-4.2.0";

    let charts = [];
    $(function () {
        //初始化时间日期
        initTime();
        ec01_circle_passengerLevel_d();
        ec02_map_airLines_d();
        ec03_line_abnormalFlight_d();
    });

    function ec01_circle_passengerLevel_d() {
        let chart = echarts.init($("#ec01_circle_passengerLevel")[0]);
        charts.push(chart);
        chart.setOption(com_circle);
        chart.setOption({
            title: {
                text: '旅客级别',
                textStyle: {
                    color: '#fff',
                    fontsize: 16
                },
                x: 'center',
                y: 'bottom'
            },
            series: [{
                startAngle: 0,
                center: ['50%', '40%'],
                label: {
                    formatter: '{b}:{c}',
                    fontSize: 18
                },
                data: [
                    {name: '金卡', value: 10},
                    {name: '银卡', value: 60},
                    {name: '普卡', value: 8000},
                    {name: '白金卡', value: 2}
                ]
            }].map(function (item, index) {
                // .extend里面加上空的对象{}可以让合并时不改变参与的每个对象，否则com_pieSeries会被改变
                return $.extend(true, {}, com_circleSeries, item);
            })
        })
    }
    function ec02_map_airLines_a() {
        let chart = echarts.init($("#ec02_map_airLines")[0]);
        charts.push(chart);
        $.getJSON('../assets/data/flights.json', function (data) {
            var airports = data.airports.map(function (item) {
                return {
                    coord: [item[3], item[4]]
                }
            });
            function getAirportCoord(idx) {
                return [data.airports[idx][3], data.airports[idx][4]];
            }

            // Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
            var routesGroupByAirline = {};
            data.routes.forEach(function (route) {
                var airline = data.airlines[route[0]];
                var airlineName = airline[0];
                if (!routesGroupByAirline[airlineName]) {
                    routesGroupByAirline[airlineName] = [];
                }
                routesGroupByAirline[airlineName].push(route);
            });

            var pointsData = [];
            data.routes.forEach(function (airline) {
                pointsData.push(getAirportCoord(airline[1]));
                pointsData.push(getAirportCoord(airline[2]));
            });

            var series = data.airlines.map(function (airline) {
                var airlineName = airline[0];
                var routes = routesGroupByAirline[airlineName];

                if (!routes) {
                    return null;
                }
                return {
                    type: 'lines3D',
                    name: airlineName,

                    effect: {
                        show: true,
                        trailWidth: 2,
                        trailLength: 0.15,
                        trailOpacity: 1,
                        trailColor: 'rgb(30, 30, 60)'
                    },

                    lineStyle: {
                        width: 3,
                        color: 'rgb(50, 50, 150)',
                        // color: 'rgb(118, 233, 241)',
                        opacity: 0.1
                    },
                    blendMode: 'lighter',

                    data: routes.map(function (item) {
                        return [airports[item[1]].coord, airports[item[2]].coord];
                    })
                };
            }).filter(function (series) {
                return !!series;
            });
            series.push({
                type: 'scatter3D',
                coordinateSystem: 'globe',
                blendMode: 'lighter',
                symbolSize: 2,
                itemStyle: {
                    color: 'rgb(50, 50, 150)',
                    opacity: 0.2
                },
                data: pointsData
            });

            chart.setOption({
                legend: {
                    selectedMode: 'single',
                    left: 'left',
                    data: Object.keys(routesGroupByAirline),
                    orient: 'vertical',
                    textStyle: {
                        color: '#fff'
                    }
                },
                globe: {

                    environment: '../assets/img/starfield.jpg',

                    baseTexture: '../assets/img/earth.jpg',

                    light: {
                        ambient: {
                            intensity: 1
                        },
                        main: {
                            intensity: 0.4
                        }
                    },
                    viewControl: {
                        autoRotate: false
                    },
                },
                series: series
            });
        });

    }

    function ec03_line_abnormalFlight_d() {
        let chart = echarts.init($("#ec03_line_abnormalFlight")[0]);
        charts.push(chart);
        chart.setOption(com_line);
        chart.setOption({
            grid: {
                top: '18%'
            },
            xAxis: {
                data: [1, 2, 3, 4, 5, 6, 7],
            },
            series: [{
                name: '公司原有占比',
                data: [6.62, 8.23, 10.80, 9.12, 9.90, 6.54, 8.63]
            }, {
                name: '限制',
                data: [7.51, 7.51, 7.51, 7.51, 7.51, 7.51, 7.51]
            }].map(function (item, index) {
                // .extend里面加上空的对象{}可以让合并时不改变参与的每个对象，否则com_pieSeries会被改变
                return $.extend(true, {}, com_lineSeries, item);
            })
        })
    }

    //初始化时间日期
    function initTime() {
        setTimeout(function () {
            let currTime = new Date();
            let [month, date] = [currTime.getMonth() + 1 + '', currTime.getDate() + ''];
            let time = Date().slice(-26, -18);
            let dateStr = `${currTime.getFullYear()}-${month.length > 1 ? month : "0" + month}-${date.length > 1 ? date : "0" + date}`;
            $(".time").text(time);
            $(".date").text(dateStr);
            initTime();
        }, 500)
    }
</script>
</body>

</html>